import React, { useRef, useState, useEffect, useMemo } from'react';
import { Button, Icon } from 'element-react';
import AiChat from '@/components/ai-chat/index.jsx';
import { isAppIcon } from '@/utils/application';
import { hexToRgba } from '@/utils/theme';

const ChatEmbed = (props) => {
    const { application_profile, applicationAvailable } = props;
    const aiChatRef = useRef(null);
    const [loading, setLoading] = useState(false);
    const [leftLoading, setLeftLoading] = useState(false);
    const [show, setShow] = useState(false);
    const [paginationConfig, setPaginationConfig] = useState({
        current_page: 1,
        page_size: 20,
        total: 0
    });
    const [currentRecordList, setCurrentRecordList] = useState([]);
    const [currentChatId, setCurrentChatId] = useState('new');
    const [mouseId, setMouseId] = useState('');

    const applicationDetail = useMemo(() => {
        return application_profile;
    }, [application_profile]);

    const customStyle = useMemo(() => {
        return {
            background: applicationDetail?.custom_theme?.theme_color,
            color: applicationDetail?.custom_theme?.header_font_color
        };
    }, [applicationDetail]);

    const isEnterprise = () => {
        return window.user.isEnterprise();
    };

    const handleScroll = (event) => {
        if (
            currentChatId!== 'new' &&
            event.scrollTop === 0 &&
            paginationConfig.total > currentRecordList.length
        ) {
            const history_height = event.dialogScrollbar.offsetHeight;
            setPaginationConfig((prevConfig) => ({
               ...prevConfig,
                current_page: prevConfig.current_page + 1
            }));
        }
    };

    const clickoutside = () => {
        setShow(false);
    };

    const newChat = () => {
        setPaginationConfig({
            current_page: 1,
            page_size: 20,
            total: 0
        });
        setCurrentRecordList([]);
        setCurrentChatId('new');
    };

    const clickListHandle = (item) => {
        if (item.id!== currentChatId) {
            setPaginationConfig({
                current_page: 1,
                page_size: 20,
                total: 0
            });
            setCurrentRecordList([]);
            setCurrentChatId(item.id);
            setShow(false);
        }
    };

    const init = () => {
        // 初始化历史对话记录
    };

    useEffect(() => {
        init();
    }, []);

    return (
        <div
            className="chat-embed layout-bg"
            style={{
                '--el-color-primary': applicationDetail?.custom_theme?.theme_color,
                '--el-color-primary-light-9': hexToRgba(applicationDetail?.custom_theme?.theme_color, 0.1)
            }}
        >
            <div className="chat-embed__header" style={customStyle}>
                <div className="chat-width flex align-center">
                    <div className="mr-12 ml-24 flex">
                        {isAppIcon(applicationDetail?.icon)? (
                            <div style={{ width: '32px', height: '32px', background: 'none' }}>
                                <img src={applicationDetail?.icon} alt="" />
                            </div>
                        ) : applicationDetail?.name? (
                            <div style={{ width: '32px', height: '32px', background: 'none' }}>
                                <img alt="" />
                            </div>
                        ) : null}
                    </div>
                    <h4>{applicationDetail?.name}</h4>
                </div>
            </div>
            <div>
                <div className="chat-embed__main">
                    <AiChat
                        ref={aiChatRef}
                        applicationDetails={applicationDetail}
                        available={applicationAvailable}
                        appId={applicationDetail?.id}
                        record={currentRecordList}
                        chatId={currentChatId}
                        type="ai-chat"
                        onRefresh={(chatId) => {
                            // refresh 逻辑
                        }}
                        onScroll={handleScroll}
                        className="AiChat-embed"
                    >
                        <div className="chat-width">
                            <Button type="primary" link className="new-chat-button mb-8" onClick={newChat}>
                                <Icon name='plus'></Icon>
                                <span className="ml-4">新建对话</span>
                            </Button>
                        </div>
                    </AiChat>
                </div>
                {applicationDetail.show_history ||!isEnterprise() && (
                    <div
                        onClick={(e) => {
                            e.preventDefault();
                            e.stopPropagation();
                            setShow(!show);
                        }}
                        className="chat-popover-button cursor color-secondary"
                    >
                        <Icon name="setting" className="mr-4" style={{
                                color: applicationDetail?.custom_theme?.header_font_color
                            }}/>
                    </div>
                )}
                {show && <div className="chat-popover-mask" />}
            </div>
        </div>
    );
};

export default ChatEmbed;